<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../static/vue.js"></script>
<script src="../static/axios.js"></script>
<script src="../static/jquery-1.8.3.min.js"></script>
<body>
    <button>
        <a onclick="location.href='add.html'">添加</a>
    </button>
    <div id="app">
        姓名：<input type="text" name="name" v-model="searchMap.name">
        年龄：
        <input type="text" v-model="searchMap.minAge">-
        <input type="text" v-model="searchMap.maxAge">

        <button type="button" @click="findPage(1)">查询</button></br>

        <table border="1" cellspacing="0">
            <tr align="center">
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>密码</td>
                <td>年龄</td>
                <td>电话</td>
                <td>操作</td>
            </tr >

            <tr v-for="user in page.records" align="center">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.gender}}</td>
                <td>{{user.password}}</td>
                <td>{{user.age}}</td>
                <td>{{user.tel}}</td>
                <td>
                    <button><a @click="findById(user.id)">修改</a></button>
                    <button> <a @click="del(user.id)">删除</a> </button>
                </td>
            </tr>
        </table>
        <a href="#" @click="findPage(1)">首页</a>
        <a href="#" @click="findPage(page.current-1)">上一页</a>
        <a href="#" @click="findPage(page.current+1)">下一页</a>
        <a href="#" @click="findPage(page.pages)">尾页</a>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            page:{},
            searchMap:{}
        },
        created(){
            this.findPage(1);
        },
        methods:{
            findById(id){
                location.href="update.html?id="+id;
            },
            del(id){
                axios.get("http://localhost:8080/sys/user/del?id="+id).then(
                    res =>{
                        location.href="user.html"
                    }
                )
            },
            findPage(pageIndex){
                axios.post("http://localhost:8080/sys/user/findPage?pageIndex="+pageIndex,this.searchMap).then(
                    res=>{
                        this.page = res.data;
                    }
                )
            }
        }
    })
</script>
</html>